<template>
    <div class="mv">
        <div class="header">
            <h3>本页面使用MV下载网作为源</h3>
        </div>
        <el-form :inline="true" class="search">
            <el-input v-model="keyword" placeholder="请输入内容"></el-input>
            <el-button type="primary" @click="search">搜&emsp;索</el-button>
        </el-form>
        <div class="video-list">
            <div class="video-item"
                v-for="item in videoInfoList"
                :key="item.id"
                :class="{active: videoIds.indexOf(item.id) != -1}"
                @mousedown="showVideo(item)">
                <label>
                    <input type="checkbox" :value="item.id" v-model="videoIds">
                    <div class="title" v-html="item.hltitle"></div>
                    <img :src="item.headImg" alt="">
                </label>
            </div>
        </div>
        <el-dialog title="mv播放" :visible.sync="isShowVideo" size="full" :before-close="handleClose">
            {{videoInfo}}
            <template v-if="videoInfo.url" >
                <!--<div v-if="isFlv(videoInfo.url)" ref="iFlv" id="i-flv"></div>-->
                <video ref="iVideo" :src="videoInfo.url" controls="controls" width="100%" autoplay></video>
            </template>
            <span slot="footer" class="dialog-footer">
            </span>
        </el-dialog>
    </div>
</template>
<script>
import urlencode from 'urlencode';
import $ from 'jquery';
import flvjs from 'flv.js';
export default {
    name: 'main',
    data() {
        return {
            keyword: 't-ara',
            videoInfoList: [],
            videoIds: [],
            loading: true,
            videoInfo: {url: ''},
            isShowVideo: false
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.search();
        },
        search() {
            let me = this;
            me.videoInfoList.splice(0, me.videoInfoList.length);
            $.ajax({
                url: 'http://www.mvxz.net/search.php?searchword=' + urlencode(this.keyword, 'gbk'),
                method: 'get',
                success(res) {
                    let patt = /<a href="\/show\/(\d+).html" title="(.*?)".*?>.*?<img src="(.*?)"/g;
                    let result = null;
                    while ((result = patt.exec(res)) != null) {
                        me.videoInfoList.push({
                            id: result[1],
                            hltitle: result[2],
                            headImg: result[3],
                            url: ''
                        });
                    }
                }
            });
        },
        handleClose(done) {
            this.$refs.iVideo && this.$refs.iVideo.pause();
            done();
        },
        showVideo(videoInfo) {
            this.videoInfo = videoInfo;
            this.isShowVideo = true;
            let id = videoInfo.id;
            let url = 'http://www.mvxz.net/player/down.php';
            $.ajax({
                url: url,
                method: 'post',
                data: {
                    vid: id,
                    pid: 0
                }
            }).then(res => {
                let patt = /<a href="(.*?)"/;
                url = res.match(patt)[1];
                this.videoInfo.url = url;
                // this.$nextTick(() => {
                //     let videoElement = this.$refs.iFlv;
                //     console.log(videoElement, url);
                //     let flvPlayer = flvjs.createPlayer({
                //         type: 'flv',
                //         url: url
                //     });
                //     flvPlayer.attachMediaElement(videoElement);
                //     flvPlayer.load();
                //     flvPlayer.play();
                // });
            }, res => {
                console.log(res);
            });
        },
        isFlv(url) {
            return /\.flv/.test(url);
        }
    }
};
</script>
<style lang="less">
.header {
    overflow: hidden;
    h3 {
        text-align: center;
        margin: 0;
        padding: 15px;
    }
    .el-button {
        position: absolute;
        right: 11px;
        top: 14px;
        color: #545454;
    }
}

.search {
    margin-bottom: 20px;
}

.video-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
}

.video-item {
    width: 240px;
    cursor: pointer;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    label {
        display: block;
    }
    &.active {
        border-color: red;
    }
    .title {
        box-sizing: border-box;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 10px 20px;
    }
    img {
        width: 100%;
        max-height: 135px;
        vertical-align: bottom;
        border-top: 1px solid #ccc;
    }
    input[type="checkbox"] {
        display: none;
    }
}

.mv {
    .el-form {
        text-align: center;
    }

    .el-input,
    .el-input__inner {
        width: initial;
    }

    .el-dialog--full {
        background: transparent;
    }
}
</style>
